{% extends "zato/index.html" %}

{% block html_title %}WebSocket outgoing connections{% endblock %}

{% block "extra_css" %}
    <link rel="stylesheet" type="text/css" href="/static/css/jquery.alerts.css">
{% endblock %}

{% block "extra_js" %}

    {% comment %} jQuery {% endcomment %}
    <script nonce="{{ CSP_NONCE }}" type="text/javascript" src="/static/jquery/jquery.tablesorter.min.js"></script>
    <script nonce="{{ CSP_NONCE }}" type="text/javascript" src="/static/jquery/jquery.cookie.js"></script>
    <script nonce="{{ CSP_NONCE }}" type="text/javascript" src="/static/jquery/jquery.alerts.min.js"></script>

    {% comment %} Common JS {% endcomment %}
    <script nonce="{{ CSP_NONCE }}" type="text/javascript" src="/static/js/common.js"></script>

    {% comment %} WSX {% endcomment %}
    <script nonce="{{ CSP_NONCE }}" type="text/javascript" src="/static/js/outgoing/wsx.js"></script>

    <script nonce="{{ CSP_NONCE }}">
    $.fn.zato.data_table.get_columns = function() {
        return [

            /* 1 */
            '_numbering',
            '_selection',
            'name',

            /* 2 */
            '_is_active',
            'address_masked',
            '_is_zato',

            /* 3 a, b, c */
            '_on_connect_service',
            '_on_message_service',
            '_on_close_service',

            /* 4 */
            '_edit',
            '_delete',
            'id',

            /* 5 */
            'is_active',
            'is_zato',
            'on_connect_service_name',

            /* 6 */
            'on_message_service_name',
            'on_close_service_name',
            'security_def',

            /* 7 */
            'subscription_list',
            'has_auto_reconnect',
            'data_format',

            /* 8 */
            'ping_interval',
            'pings_missed_threshold',
            'socket_read_timeout',

            /* 9 */
            'socket_write_timeout',
            'address',
        ]
    }
    </script>

    <style type="text/css">
        div.ui-dialog {
            width: 49em !important;
        }
    </style>

{% endblock %}

{% block "content" %}
<h2 class="zato">Outgoing WebSocket connections</h2>

{% if not zato_clusters %}
    {% include "zato/no-clusters.html" %}
{% else %}

    <div id="user-message-div" style='display:none'><pre id="user-message" class="user-message"></pre></div>

{% with has_generic="1" generic_type="outconn-wsx" %}
    {% include "zato/search-form.html" with page_prompt="Show outgoing connections" %}
{% endwith %}


    {% if cluster_id %}
        <div class='page_prompt' style="clear:left">
            <a href="javascript:$.fn.zato.outgoing.wsx.create()">Create a new outgoing WebSocket connection</a>
        </div>


        <div id="markup">
            <table id="data-table">
                <thead>
                    <tr class='ignore'>

                        <!-- 1 -->
                        <th>&nbsp;</th>
                        <th>&nbsp;</th>
                        <th><a href="#">Name</a></th>

                        <!-- 2 -->
                        <th><a href="#">Active</a></th>
                        <th><a href="#">Address</a></th>
                        <th style="width:4%"><a href="#">Is Zato</a></th>

                        <!-- 3 a, b, c -->
                        <th><a href="#">On connect</a></th>
                        <th><a href="#">On message</a></th>
                        <th><a href="#">On close</a></th>

                        <!-- 4 -->
                        <th>&nbsp;</th>
                        <th>&nbsp;</th>
                        <th class='ignore'>&nbsp;</th>

                        <!-- 5 -->
                        <th class='ignore'>&nbsp;</th>
                        <th class='ignore'>&nbsp;</th>
                        <th class='ignore'>&nbsp;</th>

                        <!-- 6 -->
                        <th class='ignore'>&nbsp;</th>
                        <th class='ignore'>&nbsp;</th>
                        <th class='ignore'>&nbsp;</th>

                        <!-- 7 -->
                        <th class='ignore'>&nbsp;</th>
                        <th class='ignore'>&nbsp;</th>
                        <th class='ignore'>&nbsp;</th>

                        <!-- 8 -->
                        <th class='ignore'>&nbsp;</th>
                        <th class='ignore'>&nbsp;</th>
                        <th class='ignore'>&nbsp;</th>

                        <!-- 9 -->
                        <th class='ignore'>&nbsp;</th>
                        <th class='ignore'>&nbsp;</th>
                </thead>

                <tbody>
                {% if items %}
                {% for item in items %}
                    <tr class="{% cycle 'odd' 'even' %}" id='tr_{{ item.id }}'>

                        <!-- 1 -->
                        <td class='numbering'>&nbsp;</td>
                        <td class="impexp"><input type="checkbox" /></td>
                        <td>{{ item.name }}</td>

                        <!-- 2 -->
                        <td>{{ item.is_active|yesno:'Yes,No' }}</td>
                        <td>{{ item.address_masked }}</td>
                        <td>{{ item.is_zato|yesno:'Yes,No' }}</td>

                        <!-- 3 -->
                        <td>
                            {% if item.on_connect_service_name %}
                                <a href="{% url "service-overview" item.on_connect_service_name %}?cluster={{ cluster_id }}">{{ item.on_connect_service_name }}</a>
                            {% else %}
                                <span class="form_hint">---</span>
                            {% endif %}
                        </td>
                        <td>
                            {% if item.on_message_service_name %}
                                <a href="{% url "service-overview" item.on_message_service_name %}?cluster={{ cluster_id }}">{{ item.on_message_service_name }}</a>
                            {% else %}
                                <span class="form_hint">---</span>
                            {% endif %}
                        </td>
                        <td>
                            {% if item.on_close_service_name %}
                                <a href="{% url "service-overview" item.on_close_service_name %}?cluster={{ cluster_id }}">{{ item.on_close_service_name }}</a>
                            {% else %}
                                <span class="form_hint">---</span>
                            {% endif %}
                        </td>

                        <!-- 4 -->
                        <td><a href="javascript:$.fn.zato.outgoing.wsx.edit('{{ item.id }}')">Edit</a></td>
                        <td><a href="javascript:$.fn.zato.outgoing.wsx.delete_('{{ item.id }}')">Delete</a></td>
                        <td class='ignore item_id_{{ item.id }}'>{{ item.id }}</td>

                        <!-- 5 -->
                        <td class='ignore'>{{ item.is_active }}</td>
                        <td class='ignore'>{{ item.is_zato }}</td>
                        <td class='ignore'>{{ item.on_connect_service_name }}</td>

                        <!-- 6 -->
                        <td class='ignore'>{{ item.on_message_service_name }}</td>
                        <td class='ignore'>{{ item.on_close_service_name }}</td>
                        <td class='ignore'>{{ item.security_def }}</td>

                        <!-- 7 -->
                        <td class='ignore'>{{ item.subscription_list }}</td>
                        <td class='ignore'>{{ item.has_auto_reconnect }}</td>
                        <td class='ignore'>{{ item.data_format|default:"" }}</td>

                        <!-- 8 -->
                        <td class='ignore'>{{ item.ping_interval|default:"45" }}</td>
                        <td class='ignore'>{{ item.pings_missed_threshold|default:"1" }}</td>
                        <td class='ignore'>{{ item.socket_read_timeout|default:"60" }}</td>

                        <!-- 9 -->
                        <td class='ignore'>{{ item.socket_write_timeout|default:"60" }}</td>
                        <td class='ignore'>{{ item.address }}</td>
                    </tr>
                {% endfor %}
                {% else %}
                    <tr class='ignore'>
                        <td colspan='18'>No results</td>
                    </tr>
                {% endif %}

                </tbody>
            </table>
        </div>

{% include "zato/paginate/action-panel.html" %}

        <div id="create-div" class='data-popup ignore'>
            <div class="bd">
                <form novalidate action="{% url "out-wsx-create" %}" method="post" id="create-form">
                    <table class="form-data">
                        <tr>
                            <td style="vertical-align:middle;width:17%"><label for="id_name">Name</label></td>
                            <td>{{ create_form.name }}</td>
                        </tr>
                        <tr>
                            <td style="vertical-align:middle">Options</td>
                            <td>
                                <label>
                                Active
                                {{ create_form.is_active }}
                                </label>
                                |
                                <label>
                                Connecting to Zato
                                {{ create_form.is_zato }}
                                </label>
                                |
                                <label>
                                Auto-reconnect
                                {{ create_form.has_auto_reconnect }}
                                </label>
                                |
                                <label>
                                Data format
                                {{ create_form.data_format }}
                                </label>
                            </td>
                        </tr>
                        <tr>
                            <td style="vertical-align:middle"><label for="id_address">Address</label></td>
                            <td>{{ create_form.address }}</td>
                        </tr>
                        <tr>
                            <td style="vertical-align:middle"><label for="id_security_def">Security</label></td>
                            <td>{{ create_form.security_def }}</td>
                        </tr>
                        <tr>
                            <td style="vertical-align:middle"><label for="id_on_connect_service_name">On connect service</label></td>
                            <td>{{ create_form.on_connect_service_name }}</td>
                        </tr>
                        <tr>
                            <td style="vertical-align:middle"><label for="id_on_message_service_name">On message service</label></td>
                            <td>{{ create_form.on_message_service_name }}</td>
                        </tr>
                        <tr>
                            <td style="vertical-align:middle"><label for="id_on_close_service_name">On close service</label></td>
                            <td>{{ create_form.on_close_service_name }}</td>
                        </tr>
                        <tr>
                            <td style="vertical-align:middle">
                            More options
                            </td>
                            <td>
                            <a href="javascript:$.fn.zato.toggle_visibility('.more-options-block')">Toggle options</a>
                            </td>
                        </tr>
                        <tr class="more-options-block hidden">
                            <td></td>
                            <td>
                                <label>
                                Ping interval
                                {{ create_form.ping_interval }}
                                <span class="form_hint">(in seconds)</span>
                                </label>
                                |
                                Threshold
                                {{ create_form.pings_missed_threshold }}
                                |
                                Socket timeout
                                {{ create_form.socket_read_timeout }}
                            </td>
                        </tr>
                        <tr class="more-options-block hidden">
                            <td></td>
                            <td>
                                <label>
                                Pub/sub subscriptions<br/>
                                {{ create_form.subscription_list }}
                                </label>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2" style="text-align:right">
                                <input type="submit" value="OK" />
                                <button type='button' onclick='javascript:$.fn.zato.data_table.close(this)'>Cancel</button>
                            </td>
                        </tr>
                    </table>
                    {{ create_form.address_masked }}
                    <input type="hidden" id="cluster_id" name="cluster_id" value="{{ cluster_id }}" />
                </form>
            </div>
        </div>

        <div id="edit-div" class='data-popup ignore'>
            <div class="bd">
                <form novalidate action="{% url "out-wsx-edit" %}" method="post" id="edit-form">
                    <table class="form-data">
                        <tr>
                            <td style="vertical-align:middle;width:17%"><label for="id_edit-name">Name</label></td>
                            <td>{{ edit_form.name }}</td>
                        </tr>
                        <tr>
                            <td style="vertical-align:middle">Options</td>
                            <td>
                                <label>
                                Active
                                {{ edit_form.is_active }}
                                </label>
                                |
                                <label>
                                Connecting to Zato
                                {{ edit_form.is_zato }}
                                </label>
                                |
                                <label>
                                Auto-reconnect
                                {{ edit_form.has_auto_reconnect }}
                                </label>
                                |
                                <label>
                                Data format
                                {{ edit_form.data_format }}
                                </label>
                            </td>
                        </tr>
                        <tr>
                            <td style="vertical-align:middle"><label for="id_edit-address">Address</label></td>
                            <td>{{ edit_form.address }}</td>
                        </tr>
                        <tr>
                            <td style="vertical-align:middle"><label for="id_edit-security_def">Security</label></td>
                            <td>{{ edit_form.security_def }}</td>
                        </tr>
                        <tr>
                            <td style="vertical-align:middle"><label for="id_edit-on_connect_service_name">On connect service</label></td>
                            <td>{{ edit_form.on_connect_service_name }}</td>
                        </tr>
                        <tr>
                            <td style="vertical-align:middle"><label for="id_edit-on_message_service_name">On message service</label></td>
                            <td>{{ edit_form.on_message_service_name }}</td>
                        </tr>
                        <tr>
                            <td style="vertical-align:middle"><label for="id_edit-on_close_service_name">On close service</label></td>
                            <td>{{ edit_form.on_close_service_name }}</td>
                        </tr>
                        <tr>
                            <td style="vertical-align:middle">
                            More options
                            </td>
                            <td>
                            <a href="javascript:$.fn.zato.toggle_visibility('.more-options-block')">Toggle options</a>
                            </td>
                        </tr>
                        <tr class="more-options-block hidden">
                            <td></td>
                            <td>
                                <label>
                                Ping interval
                                {{ edit_form.ping_interval }}
                                <span class="form_hint">(in seconds)</span>
                                </label>
                                |
                                Threshold
                                {{ edit_form.pings_missed_threshold }}
                                |
                                Socket timeout
                                {{ edit_form.socket_read_timeout }}
                            </td>
                        </tr>
                        <tr class="more-options-block hidden">
                            <td></td>
                            <td>
                                <label>
                                Pub/sub subscriptions<br/>
                                {{ create_form.subscription_list }}
                                </label>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2" style="text-align:right">
                                <input type="submit" value="OK" />
                                <button type='button' onclick='javascript:$.fn.zato.data_table.close(this)'>Cancel</button>
                            </td>
                        </tr>
                    </table>
                    {{ edit_form.address_masked }}
                    <input type="hidden" id="id_edit-cluster_id" name="cluster_id" value="{{ cluster_id }}" />
                    <input type="hidden" id="id_edit-id" name="id" />
                </form>
            </div>
        </div>

    {% endif %}


{% endif %}{% comment %}not zato_clusters{% endcomment %}

{% endblock %}
